import styles from './index.module.less'
import React, { useEffect, useState } from 'react'
import Icon from '@/components/Icons'
interface ListCardProps {
  info: {
    id:string //文章id，用于详情页面跳转用
    title: string //文章标题
    author: string //作者
    avatar: string //作者头像
    hot: String //热度
    coverUrl: string //封面
    isLike: boolean //是否点赞
  }
  children?: React.ReactNode
  cardClick?: (info: ListCardProps['info']) => void//点击卡片事件
  likeClick?: (info: ListCardProps['info']) => void//点赞事件
}

const ListCard: React.FC<ListCardProps> = ({ info, children,cardClick=()=>{},likeClick=()=>{} }) => {
  useEffect(() => {
    console.log('卡片组件加载')
  }, [])
  const [isLoading, setIsloading] = useState<boolean>(true)
  const LazyImage = ({ src }: { src: string }) => {
    return (
      <img
        src={src}
        className={styles.cardCover}
        alt='content'
        onLoad={e => {
          console.log('图片加载完成')
          setIsloading(false)
        }}
      />
    )
  }
  return (
    <div className={styles.listCard} onClick={()=>cardClick(info)}>
      <div
        className={isLoading ? styles.placeholder : ''}
        style={isLoading ? { height: Math.floor(Math.random() * (300 - 200 + 1)) + 200 } : { height: 'auto' }}
      >
        <LazyImage src={info.coverUrl} />
      </div>
      {/* <img className={styles.cardCover} src={info.coverUrl} alt="" /> */}
      {children ? (
        children
      ) : (
        <div className={styles.cardInfo}>
          <div className={styles.title}>{info.title}</div>
          <div className={styles.author}>
            <div className={styles.authorInfo}>
              <img className={styles.avatarImg} src={info.avatar} alt='' />
              <div className={styles.authorName}>{info.author}</div>
            </div>
            <div className={styles.hotInfo}>
              <Icon onClick={(e)=>{
                e.stopPropagation(); // 阻止事件冒泡
                likeClick(info)
                }} iconName={info.isLike?'icon-xiaohongshudianzan2':'icon-shuju_xiaohongshudianzan_xianxing'} />
              <div className={styles.hot}>{info.hot === '0' ? '赞' : info.hot}</div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
export default ListCard
